<template>
  <Scroll v-if="comic"
          cname="comic-box"
          @onScroll="onScroll"
          ref="scroll">
          <Header cname="top-bar"
                  :back=true 
                  @onBack="onBack"
                  @onMenu="onMenu"
                  @onSearch="onSearch"
                  ref="comicHeader"/>
          <!-- end header -->
          <TabPanel />
          <!-- end TabPanel -->
          <div class="detail">
            <!-- info -->
            <div class="comic-info">
              <div class="cover-bg">
                <img 
                  class="thumbnail" 
                  alt=""
                  :style="{
                    backgroundImage:'url(' + comic.image + ')', backgroundRepeat:'no-repeat', backgroundPosition:'center center', backgroundSize: 'cover', opacity: 1}">
              </div>
              <!-- cover-bg end -->
              <div class="comic-cover">
                <img v-lazy="comic.image" alt="comic-head-icon">
              </div>
              <!-- comic-cover end -->
              <p class="comic-title">{{comic.title}}</p>
              <p class="comic-author">{{comic.author}}</p>
              <!-- categore-tags-box -->
              <ul class="tags-box">
               <li v-for="(item,index) in tags" :key="index">
                 <Tag cname="cate-tag"><span>{{item}}</span></Tag>
               </li>
              </ul>
              <p v-if="comic.update_time">更新时间: {{comic.update_time}}</p>
            </div>
            <!-- hander-box -->
            <div class="hander-box">
              <span @click="onRead" class="read">{{tipRead}}</span>
            </div>
          </div>
          <!-- end detail -->
          <ul class="detail-tabs">
            <li @click="onTabActive(0)" :class="{'detail-tab-active':tabActive==0}">简介</li>
            <li @click="onTabActive(1)" :class="{'detail-tab-active':tabActive==1}">章节</li>
          </ul>
          <div v-show="tabActive==0">
            <!-- 简介 -->
            <p class="comic-description">{{comic.description}}</p>
          </div>
          <!-- detail-des && detail-sections -->
          <div v-show="tabActive==1">
            <!-- 最新章节 -->
            <div class="hd">
              <span class="comic-latest">最新章节： {{comic.section}}</span>
              <div @click="doSort" :class="['sort',{isRevese}]">{{isReveseText}}</div>
            </div>
            <!-- 章节列表 -->
            <ul :class="['comic-sections',
              {'comic-sections-all':isShowAllSections==true}
            ]">
              <li v-for="item in sections" :key="item.sid" @click="onTap(item.sid)">
                <Tag cname="cate-tag"><span>{{item.title}}</span></Tag>
              </li>
            </ul>
            <!-- look-all-sections -->
            <div @click="showAllSections" class="look-all-sections" v-text="showSectionsText"></div>
          </div>
          <ToTop v-if="showToTop" @onToTop="onToTop"/>
  </Scroll>
</template>

<script>
import Scroll from '../core/scroll.vue'
import Tag from './Tag.vue'
import Header from './Header.vue'
import TabPanel from '../../components/common/TabPanel.vue'
import ToTop from '../../components/common/ToTop.vue'
import {getDetail, getSections} from '../../api/comic.js'
import {strSpilt, arrSort} from '../../utils/common.js'
import {Mixin} from '../../utils/mixin.js'

export default {
  mixins: [Mixin],
  components: {
    Scroll,
    Tag,
    Header,
    TabPanel,
    ToTop
  },
  data() {
    return {
      temp: 0.01,
      tipRead: '开始阅读',
      tags: [],
      cid: null, //漫画cid
      comic: null,  //漫画数据
      sections: null, //漫画章节数据
      sectionTotal: null, //漫画章节数据
      isShowAllSections: false, //是否点击查看全部
      showSectionsText: '查看全部',
      isRevese: false, //是否倒序
      isReveseText: '倒序',
      currentSID: null,  //当前阅读章节id
      tabActive: 1,  // tab选中
    }
  },
  created() {
    this.initRouteParams()
    this.loadData()
    this.onTabActive(1)
  },
  mounted() {
    if (this.cid == this.currentReadCID) {
      this.currentSID = this.currentReadSID
      this.tipRead = '继续阅读'
    }
  },
  methods: {
    //初始化 获取路由传递处理
    initRouteParams() {
      let _cid = this.$route.params.cid
      try{
        _cid = parseInt(_cid);
      }catch{
        this.$router.go(-1)
      }
      if (!_cid || _cid==NaN) {
        this.$router.go(-1)
      }
      this.cid = _cid
    },
    //加载数据
    loadData() {
      getDetail(this.cid).then(res=>{
        this.comic = res
        this.tags = strSpilt(this.comic.category, '|')
      })
      getSections(this.cid).then(res=>{
        this.sections = res.sections
        this.sectionTotal = res.total
      })
    },
    //点击阅读
    onRead(e) {
      console.log('want to read')
      if(!this.currentSID) {
        this.routerToLink(this.sections[0].sid)
      }else {
        this.routerToLink(this.currentSID)
      }
    },
    // 点击章节标签
    onTap(sid) {
      if(!sid) {return}
      this.routerToLink(sid)
    },
    //点击/收起 参看全部章节
    showAllSections() {
      this.isShowAllSections = !this.isShowAllSections
      if(this.isShowAllSections) {
        this.showSectionsText = '收起'
      }else{
        this.showSectionsText = '查看全部'
      }
    },
    //升序或倒叙
    doSort() {
      this.isRevese = !this.isRevese
      this.isReveseText = this.isRevese?'升序':'倒序'
      this.sections = this.sections.reverse()
    },
    // 跳转到阅读页
    routerToLink(sid) {
      if (!sid) { return }
      //console.log('上次阅读的 cid=' + this.currentReadCID)
      //console.log('准备阅读的 cid=' + this.cid)
      //console.log('准备阅读 sid= '+sid)
      this.setCurrentReadSID(sid)
      this.setCurrentReadSections(this.sections)
      //console.log(this.sections)
      this.$router.push({
        path: `/comic/${this.cid}/${sid}`
      })
    },
    //点击返回
    onBack() {
      this.$router.go(-1)
    },
    // tab切换
    onTabActive(index) {
      this.tabActive = index
    },
    //滚动
    onScroll(offsetY) {
      this.headerStyleChangeWithScroll(offsetY)
      //console.log(offsetY)
      if (offsetY > 200) {
        this.setShowToTop(true)
      }
      if (offsetY < 200) {
        this.setShowToTop(false)
      }
    },
    headerStyleChangeWithScroll(offsetY) {
      if(offsetY<=50) {
        this.$refs.comicHeader.$el.style.backgroundColor='rgba(255,255,255,0.01)'
      }
      if(offsetY>50&&offsetY<=200) {
        this.temp = offsetY/200
        this.$refs.comicHeader.$el.style.backgroundColor='rgba(255,255,255,'+this.temp+')'
      }
    },
    onToTop() {
      this.$refs.scroll.scrollTo(0,0)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../assets/style/mixin.scss';
@import '../../assets/style/color.scss';

.comic-box {
  width: 100%;
  height: 100%;
  background-color: $color-bg-f;
  font-size: $font-size-16;
  clear: both;
  .top-bar {
    position: fixed;
    top: 0;
    z-index: 49;
    color: $color-text-f;
    background-color: $color-bg-mask;
  }

  .detail {
    width: 100%;
    position: relative;
    background-color: $color-bg-f;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    clear: both;
    .comic-info {
      width: 100%;
      position: relative;
      z-index: 2;
      padding: 50px 0 0 136px;
      color: $color-text-f;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: $font-size-14;
      .cover-bg {
          position: absolute;
          left: 0;
          top: 0;
          z-index: -2;
          width: 100%;
          height: 100%;
          overflow: hidden;
          background-color: rgba(0, 0, 0, 0.6);
        .thumbnail {
          width: 200%;
          height: 200%;
          position: absolute;
          -webkit-filter: blur(8px);
          filter: blur(8px);
          -webkit-transform: translateZ(0);
          transform: translateZ(0);
          opacity: .5!important;
        }
      }
      .comic-cover {
        width: 105px;
        padding: 2px;
        position: absolute;
        top: 50px;
        left: 8px;
        img {
          width: 100%;
          height: 100%;
          background-color: $color-bg-f;
          padding: 2px;
        }
      }
      .comic-title {
        color: $color-text-f;
        font-size: $font-size-22;
        font-weight: 700;
      }
      .comic-author {
        font-size: 14px;
        margin: 4px 0;
      }
      .tags-box {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        li {
          margin: 2px 6px 2px 0;
          background-color: rgb(199, 133, 144);
          border-radius: 10px;
          font-size: 10px;
          .cate-tag {
            padding: 1px 6px 3px 6px;
          }
        }
        li:nth-child(odd) {
          background-color: rgb(102, 201, 187);
        }
      }
    }
    .hander-box {
      width: 100%;
      box-sizing: border-box;
      height: 40px;
      padding-right: 10px;
      @include right;
      .read {
        line-height: 28px;
        font-size: $font-size-14;
        background-color: #fc6454;
        border: 1px solid #fc6454;
        border-radius: 16px;
        padding-left: 20px;
        padding-right: 20px;
        color: #fff;
      }
    }
  }
  
  .hd {
    width: 96%;
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $color-text-9;
    color: $color-text-7;
    display: flex;
    @include center;
    .comic-latest {
      flex: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .sort {
      background-color: $color-bg;
      padding: 6px 8px;
      border-radius: 4px;
      margin-bottom: 2px;
    }
  }

  .detail-tabs {
    width: 100%;
    height: 50px;
    line-height: 50px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: $color-text-9;
    li {
      width: 20%;
    }
    .detail-tab-active {
      color: $color-text-5;
      border-bottom: 1px solid $color-text-fa;
    }
  }

  .comic-sections-all {
    height: auto!important;
  }

  .comic-sections {
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    height: 90px;
    padding: 0 10px;
    overflow: hidden;
    color: $color-text-9;
    li {
      width: 22%;
      height: 30px;
      line-height: 30px;
      margin-top: 8px;
      margin-right: 3%;
      text-align: center;
      background-color: $color-bg;
      box-sizing: border-box;
      border-radius: 2px;
      font-size: $font-size-14;
      overflow: hidden;
      .cate-tag {
        box-sizing: border-box;
        padding: 1px 6px 3px 6px;
      }
    }
  }

  .look-all-sections {
    width: 96%;
    margin: 10px auto;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: 1px solid $color-bg;
    border-radius: 6px;
    color: $color-text-5;
  }

  .comic-description {
    padding: 10px;
    font-size: $font-size-16;
    color: $color-text-7;
    text-indent: 36px;
  }
}
</style>
